<template>
    <div class="common-tab-content">
        <div class="query-table-page">
            <div class="query-box">
                <el-form :inline="true" :model="formObj" class="common-query-form">
                    <el-form-item label="名称">
                        <el-input v-model="formObj.user" placeholder="请输入名称" clearable/>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="formObj.phone" placeholder="请输入电话" clearable/>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" type="primary" @click="queryFn">查询</el-button>
                        <el-button :loading="loading" type="primary" @click="initFn">重置</el-button>
                        <el-button type="primary" @click="addFn">新增电话</el-button>
                        <el-button type="success" @click="uploadData">
                            <template #icon><Upload/></template>
                            Excel导入
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table-box">
                <div class="table-list">
                    <el-table :key="tbKey" ref="commonTable" :data="tableData" border stripe style="width: 100%" height="620px">
                        <el-table-column type="index" label="序号" width="60"/>
                        <el-table-column prop="name" label="名称"/>
                        <el-table-column prop="phone" label="电话"/>
                        <el-table-column prop="id" label="操作" width="100px">
                            <template #default="scope">
                                <span @click="editFn(scope.row)" class="common-table-btn">修改</span>
                                <span @click="deleteFn(scope) " class="common-table-btn">删除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="paging-box">
                    <el-pagination
                            v-model:current-page="currentPage"
                            v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 50, 100]"
                            :size="size"
                            :background="background"
                            layout="total, prev, pager, next, sizes, jumper"
                            :total="124"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
        <el-dialog v-model="visible" width="500">
            <template #header>
                <div class="common-title">
                    <h4 class="title-class">
                        <el-icon class="el-icon--left">
                            <Edit/>
                        </el-icon>
                        <span>新增电话</span>
                    </h4>
                </div>
            </template>
            <div class="common-dialog-wrap">
                <el-form ref="commonForm" :model="addObj" class="common-form" label-position="top">
                    <el-form-item label="名称">
                        <el-input v-model="addObj.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="addObj.phone"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeAdd">取消</el-button>
                    <el-button type="primary" @click="enterAdd">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="visible2" width="500">
            <template #header>
                <div class="common-title">
                    <h4 class="title-class">
                        <el-icon class="el-icon--left">
                            <Upload/>
                        </el-icon>
                        <span>导入</span>
                    </h4>
                </div>
            </template>
            <div class="common-dialog-wrap">
                <el-upload
                        class="upload-demo"
                        drag
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        multiple
                >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        将文件拖至此处 <em>或点击上传</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            仅限于.xlsx格式，且单个文件不得大于500M
                        </div>
                    </template>
                </el-upload>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visible2 = false">取消</el-button>
                    <el-button type="primary" @click="enterAdd2">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import {reactive, ref, onMounted} from "vue"
import {Edit, Upload, UploadFilled} from '@element-plus/icons-vue'
import {$confirm, $msg} from "@/utils";
const formObj = reactive({
    user: '',
    phone: '',
})

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(false)
const loading = ref(false)
const visible = ref(false)
const visible2 = ref(false)
const addObj = reactive({
    name: '',
    phone: ''
})
const commonForm = ref(null)
const commonTable = ref(null)
const tbKey = ref(0)
function queryFn() {
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const addFn = () => {
    visible.value = true
}
const initFn = () => {
    loading.value = true
    formObj.value = {
        user: '',
        phone: '',
    }
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const closeAdd = () => {
    visible.value = false
}
const enterAdd = async () => {
    $msg({
        type: 'success',
        message: '操作成功'
    })
    visible.value = false
}
function enterAdd2(){
    $msg({
        type: 'success',
        message: '导入成功'
    })
    visible2.value = false
}
const editFn = (obj) => {
    Object.assign(addObj, {
        name: '省招办咨询电话',
        phone: '0531-37212131',
    });
    visible.value = true
}
const deleteFn = (obj) => {
    $confirm( {
        title: '是否删除该数据?',
        type: 'delete'
    }).then(() => {
        $msg({
            type: 'success',
            message: '删除成功',
        })
    })
}
function uploadData(){
    visible2.value = true
}
onMounted(() => {
    for (let i = 0; i < 20; i++) {
        tableData.value.push({
            name: '省招办咨询电话',
            phone: '0531-37212131',
            index: i + 1
        })
    }
})
</script>
<style scoped lang="less">

</style>